import { Component } from 'react';
import { Carousel } from 'antd-mobile';
import { http, baseURL } from '../../utils/http';
import './index.scss';

import Search from '../../components/Search';
export default class Index extends Component {
  state = {
    swiperData: [],
    renderFlag: false,
    groups: [],
    latestNews: [],
  };
  componentDidMount() {
    this.getIndexData();
  }
  render() {
    const { groups, renderFlag, latestNews } = this.state;
    return (
      <>
        <div style={{ height: '250px', position: 'relative' }}>
          {renderFlag ? (
            <Carousel infinite autoplay>
              {this.renderSwiper()}
            </Carousel>
          ) : (
            ''
          )}
          <Search {...this.props} />
        </div>
        <div className='navs'>
          {['整租', '合租', '地图找房', '去出租'].map((item, index) => (
            <div className='navItem' key={item} onClick={() => this.props.history.push('/home/findHouse')}>
              <img src={require(`../../assets/images/nav-${index + 1}.png`).default} alt='imgs' />
              <span>{item}</span>
            </div>
          ))}
        </div>
        <div className='groups'>
          <div className='header'>
            <h3>租房小组</h3>
            <span>更多</span>
          </div>
          <div className='group-items'>
            {groups.map(item => (
              <div className='group-item' key={item.id}>
                <div className='infos'>
                  <div>
                    <div className='title'>{item.title}</div>
                    <div className='desc'>{item.desc}</div>
                  </div>
                </div>
                <div className='img-box'>
                  <img src={`${baseURL}${item.imgSrc}`} alt='img' />
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className='latest-news'>
          <h3>最新资讯</h3>
          <div className='news-box'>
            {latestNews.map(item => (
              <div className='news-item' key={item.id}>
                <div className='img-box'>
                  <img src={`${baseURL}${item.imgSrc}`} alt='img' />
                </div>
                <div className='desc'>
                  <div className='title'>{item.title}</div>
                  <div className='info'>
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </>
    );
  }
  async getIndexData() {
    const curCity = JSON.parse(window.localStorage.getItem('zf_city'));
    const { data: swiper } = await http.get(`/home/swiper`);
    const { data: groups } = await http.get('/home/groups', {
      params: { area: curCity.value || 'AREA|88cff55c-aaa4-e2e0' },
    });
    const { data: latesNews } = await http.get('/home/news');
    this.setState({
      latestNews: latesNews.body,
      groups: groups.body,
      swiperData: swiper.body,
      renderFlag: true,
    });
  }
  renderSwiper() {
    return this.state.swiperData.map(item => (
      <span key={item.id} style={{ display: 'inline-block', width: '100%', height: 250 }}>
        <img src={`${baseURL}${item.imgSrc}`} alt={item.alt} style={{ width: '100%', height: '100%' }} />
      </span>
    ));
  }
}
